<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jQuery淘宝商品发布三级联动菜单</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <style>
    body {
        padding:20px;
    }
    .select-res{
        margin-top: 160px;
    }
    .select-res span {
        display: inline-block;
        width:180px;
        height:14px;
        line-height:14px;
        padding:7px 15px 7px 5px;
        border:solid 1px #c0c0c0;
        background:url(images/select_box_bg.gif) no-repeat 190px center;
        cursor: pointer;
        color:#c2c2c2;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
    }
    .select-res p {
        position:relative;
        width: 200px;
        height:28px;
        line-height:28px;
        border-bottom:dashed 1px #c0c0c0;
        padding:0 5px;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
        padding-right:20px;
    }
    .select-res a {
        position:absolute;
        top:0;
        right:0;
        display: block;
        width:28px;
        height:28px;
        background:url(images/close_btn.jpg) no-repeat center;
        cursor:pointer;
    }
    .select-res input {
        width:172px;
        height:14px;
        line-height:14px;
        margin-left:4px;
        padding:7px 5px;
        border:solid 1px #c0c0c0;
        color:#2c2c2c;
    }
    .select-res span.selected {
        color:#626262;
    }

    .select-box {
        border:solid 1px #fd8340;
        width:536px;
        height:220px;
        padding:20px 20px 10px;
        position:absolute;
        display:none;
        z-index:5;
        background: #fff;
    }
    .select-box .close-btn {
        position:absolute;
        right:5px;
        top:5px;
        cursor: pointer;
    }
    .select-box .wrap {
        height:200px;
        border:solid 1px #ddd;
        margin-top:5px;
    }
    .select-box ul {
        float:left;
        width:178px;
        height:200px;
        overflow-y: scroll;
    }
    .select-box ul li {
        height:25px;
        line-height:25px;
        padding:0 10px;
        background: url(images/arr.gif) no-repeat 152px center;
        color:#626262;
        cursor: pointer;
    }
    .select-box ul li.selected {
        background:url(images/arr_selected.gif) no-repeat 152px center #fd8340;
        color:#fff;
    }
    </style>
</head>

<body style="background-color:#F2F2F2;" id="top">

<header style="width: 1230px;line-height:2.5em;margin:0 auto;height: 34px;font-size: 12px;">
    <div style="display: inline;">
        <span style="padding-right: 1em">欢迎来二手帮</span>
    </div>

    <div style="float: right">
        <a href="#" class="keyList">首页</a>
        <a href="#" class="keyList">个人中心</a>
    </div>
</header>

<div id="search" style="background: white;width:1330px;height: 130px;position: absolute">
    <div style="position: absolute;width: 625px;height: 100px;left: 50%;top: 50%;margin-top: -50px;margin-left: -312.5px">
        <div style="position: relative;width: 625px;height:40px;left: 50%;top: 50%;margin-top: -20px;margin-left: -312.5px">
            <form>
                <input type="text" style="border: 2px solid #ff552e;width: 77%;height: 40px" placeholder="搜索您想要的宝贝"><button type="submit" style="border: 2px solid #ff552e;width: 22%;height: 44px;background: #ff552e;color: white;font-size: 18px;font-weight: 700;letter-spacing: 5px;">搜索</button>
            </form>
        </div>
    </div>
</div>

    <div class="select-res">
        <span>请选择您主营的品类名称（多选）</span>
    </div>
    <div class="select-box">
        <span class="close-btn">
            <img src="images/close_btn.jpg" />
        </span>
        <div class="wrap">
            <ul class="first"></ul>
            <ul class="second"></ul>
            <ul class="third"></ul>
        </div>
    </div>
    <script>
    var dataJson = {
        "option": [{
            "id": "1",
            "name": "二手电器",
            "child": [{
                "id": "4",
                "name": "手机",
                "child": [{
                    "id": "12",
                    "name": "苹果"
                }, {
                    "id": "13",
                    "name": "oppo"
                }, {
                    "id": "14",
                    "name": "华为"
                }, {
                    "id": "15",
                    "name": "小米"
                }, {
                    "id": "16",
                    "name": "其他"
                }]
            }, {
                "id": "5",
                "name": "电脑",
                "child": [{
                    "id": "35",
                    "name": "联想"
                }, {
                    "id": "36",
                    "name": "苹果"
                }, {
                    "id": "37",
                    "name": "华硕"
                }, {
                    "id": "38",
                    "name": "戴尔"
                }, {
                    "id": "39",
                    "name": "其他"
                }]
            }, {
                "id": "6",
                "name": "家电",
                "child": [{
                    "id": "58",
                    "name": "冰箱"
                }, {
                    "id": "59",
                    "name": "洗衣机"
                }, {
                    "id": "60",
                    "name": "电视"
                }, {
                    "id": "61",
                    "name": "其他"
                }]
            }]
        }, {
            "id": "2",
            "name": "二手图书",
            "child": [{
                "id": "151",
                "name": "课本",
                "child": [{
                    "id": "156",
                    "name": "小学"
                }, {
                    "id": "157",
                    "name": "初中"
                }, {
                    "id": "158",
                    "name": "高中"
                }, {
                    "id": "159",
                    "name": "大学"
                }]
            }, {
                "id": "152",
                "name": "课外读物",
                "child": [{
                    "id": "162",
                    "name": "小说"
                }, {
                    "id": "163",
                    "name": "人物传记"
                }, {
                    "id": "164",
                    "name": "历史"
                }, {
                    "id": "165",
                    "name": "科学"
                }, {
                    "id": "1059",
                    "name": "其他"
                }]
            }]
        }, {
            "id": "3",
            "name": "美容保健",
            "child": [{
                "id": "200",
                "name": "护肤",
                "child": [{
                    "id": "206",
                    "name": "水乳"
                }, {
                    "id": "207",
                    "name": "精华"
                }, {
                    "id": "208",
                    "name": "面膜"
                }, {
                    "id": "209",
                    "name": "其他"
                }]
            }, {
                "id": "201",
                "name": "美妆",
                "child": [{
                    "id": "218",
                    "name": "口红"
                }, {
                    "id": "219",
                    "name": "粉底"
                }, {
                    "id": "220",
                    "name": "眼妆"
                }, {
                    "id": "221",
                    "name": "其他"
                }]
            }]
        }, {
            "id": "256",
            "name": "其他",
            "child": [{
                "id": "258",
                "name": "二手车辆",
                "child": [{
                    "id": "264",
                    "name": "国产"
                }, {
                    "id": "265",
                    "name": "日产"
                }, {
                    "id": "266",
                    "name": "欧美产"
                }, {
                    "id": "267",
                    "name": "其他"
                }]
            }, {
                "id": "259",
                "name": "母婴儿童",
                "child": [{
                    "id": "276",
                    "name": "衣物"
                }, {
                    "id": "277",
                    "name": "玩具"
                }, {
                    "id": "278",
                    "name": "其他"
                }]
            }, {
                "id": "260",
                "name": "文体户外",
                "child": [{
                    "id": "282",
                    "name": "球类"
                }, {
                    "id": "283",
                    "name": "登山装备"
                }, {
                    "id": "284",
                    "name": "健身器材"
                }, {
                    "id": "285",
                    "name": "跑步用品"
                }, {
                    "id": "286",
                    "name": "其他"
                }]
            }, {
                "id": "262",
                "name": "其他",
                "child": [{
                    "id": "292",
                    "name": "其他"
                }]
            }]
        }]
    }
    var l1 = 0,
        l2 = 0;
    var cname1, cname2, cname3;
    var cid1, cid2, cid3;
    var canClick = !0;
    var canClose = !1;
    $('.select-box').css({
        left: $('.select-res').offset().left,
        top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
    });
    $('span', $('.select-res')).on('click', function() {
        $('.select-box').show();
        if (canClick) {
            $('ul', $('.select-box')).html('');
            fillData();
            canClick = !1;
        }
    });
    $('span', $('.select-box')).on("click", function() {
        canClose ? $('.select-box').hide() : alert('请选择下级品类！');
        canClick = !0;
    });

    $('.select-res').on('click', 'a', function() {
        $(this).parent().remove();
        $('.select-box').css({
            top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
        });
    })

    $('ul.first', $('.select-box')).on('click', 'li', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        $('ul.third').html('');
        fillData($(this).index());
        l1 = $(this).index();
        cname1 = $(this).text();
        cid1 = $(this).attr('val');
        canClose = !1;
        $('input.cid', $('.select-res')).val(cid1);
        $('input.cname', $('.select-res')).val(cname1);
    });
    $('ul.second', $('.select-box')).on('click', 'li', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        fillData(l1, $(this).index());
        l2 = $(this).index();
        cname2 = $(this).text();
        cid2 = $(this).attr('val');
        canClose = !1;
        $('input.cid', $('.select-res')).val(cid1 + ',' + cid2);
        $('input.cname', $('.select-res')).val(cname1 + ',' + cname2);
    });
    $('ul.third', $('.select-box')).on('click', 'li', function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        cname3 = $(this).text();
        cid3 = $(this).attr('val');
        canClose = !0;
        var hasExist = !1;
        $('.select-res').find("p").each(function() {
            if ($(this).text().split(' > ')[2] == cname3) hasExist = !0;
        })
        hasExist ? alert('所选品类已被添加！') : $('.select-res').append('<p>' + cname1 + ' > ' + cname2 + ' > ' + cname3 + '<a></a><input type="hidden" value="' + cid1 + ',' + cid2 + ',' + cid3 + '" name="cid[]" /><input type="hidden" value="' + cname1 + ',' + cname2 + ',' + cname3 + '" name="cname[]" /></p>');
        $('.select-box').css({
            top: $('.select-res').offset().top + $('.select-res').outerHeight(true)
        });
        $('input.cid', $('.select-res')).val(cid1 + ',' + cid2 + ',' + cid3);
        $('input.cname', $('.select-res')).val(cname1 + ',' + cname2 + ',' + cname3);
    });

    //填充级联数据

    function fillData(l1, l2) {
        var temp_html = "";
        if (typeof(dataJson.option) != 'undefined' && arguments.length == 0) {
            $.each(dataJson.option, function(i, pro) {
                temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
            });
        } else if (typeof(dataJson.option[l1].child) != 'undefined' && arguments.length == 1) {
            $.each(dataJson.option[l1].child, function(i, pro) {
                temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
            });
        } else if (typeof(dataJson.option[l1].child[l2].child) != 'undefined' && arguments.length == 2) {
            $.each(dataJson.option[l1].child[l2].child, function(i, pro) {
                temp_html += '<li val="' + pro.id + '">' + pro.name + '</li>';
            });
        }
        $('.select-box ul:eq(' + arguments.length + ')').html(temp_html);
    }
    </script>
	<div style="text-align:center;">
</div>
</body>

</html>
